<template>
  <view
    v-for="(line, lineIndex) in navigateList"
    :key="lineIndex"
    class="navigate-list"
    :style="{
      backgroundColor: props.component.backgroundColor,
      color: props.component.textColor
    }"
  >
    <view
      v-for="(item, index) in line"
      :key="index"
      class="navigate-item"
      @click="clickHandle(item)"
    >
      <v-image
        height="120rpx"
        width="120rpx"
        :border-radius="borderRadius"
        :src="item.url"
      />
      <view v-if="item.title" class="title">
        {{ item.title }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  component: StorePageNavigateItem;
}>();

const emits = defineEmits<{
  navigate: [event: string, value: string | undefined];
}>();

const borderRadius = computed(() => `${props.component.borderRadius ?? 16}rpx`);
const navigateList = computed(() => {
  const list = props.component.navigateList;
  switch (true) {
    case list.length >= 9:
      return [list.slice(0, 5), list.slice(5)];
    case list.length >= 7:
      return [list.slice(0, 4), list.slice(4)];
    case list.length > 5:
      return [list.slice(0, 3), list.slice(3)];
    default:
      return [list];
  }
});

const clickHandle = (item: StorePageNavigateItem['navigateList'][number]) => {
  if (item.event === 'page') {
    emits('navigate', item.event, item.page);
  } else if (item.event === 'product') {
    emits('navigate', item.event, item.product);
  }
};
</script>

<style lang="scss" scoped>
.navigate-list {
  padding: 6rpx 12rpx;
  display: flex;
  gap: 6rpx;
  align-items: center;
  justify-content: space-evenly;
  .navigate-item {
    width: calc((100% - 48rpx) / 5);
    height: 168rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    .title {
      width: 100%;
      height: 36rpx;
      line-height: 36rpx;
      font-size: 24rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
  }
}
</style>
